import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import "../css/checkStyles.css";
const images = [
  "images/green.jpg",
  "images/family.jpg",
  "images/panda.png",
  "images/sickness.jpg",
];

const imageTextMap = {
  0: "保护大自然",
  1: "帮助灾害家庭",
  2: "保护濒临动物",
  3: "帮助疾病家庭",
};
function CheckConnect() {
  const navigate = useNavigate();
  const [chainId, setChainId] = useState();
  const { ethereum } = window;
  const [isConnected, setIsConnected] = useState(false);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [showModal, setShowModal] = useState(false); //悬浮窗

  //图片轮播
  useEffect(() => {
    const intervalId = setInterval(() => {
      const nextIndex = (currentImageIndex + 1) % images.length;
      setCurrentImageIndex(nextIndex);
    }, 3000); // 5秒切换一次图片

    return () => clearInterval(intervalId);
  }, [currentImageIndex]);
  const textForImage = imageTextMap[currentImageIndex];

  //链接metamask
  const LoginWallet = async () => {
    if (!isConnected) {
      try {
        await window.ethereum.request({
          method: "wallet_requestPermissions",
          params: [{ eth_accounts: {} }],
        });
        const chainId = await ethereum.request({ method: "eth_chainId" });
        setChainId(chainId);
        console.log(chainId);
        if (chainId === "0xaa36a7") {
          setChainId(chainId);
          alert("连接Sepolia 测试网络成功");
          setIsConnected(true);
          navigate("/header/main");
          console.log("1" + isConnected);
        } else {
          alert("请连接 Sepolia 测试网络");
        }
      } catch (error) {
        alert(`"${error.message}"`);
      }
    } else {
      alert("MetaMask 未连接，请先连接 MetaMask");
    }
  };
  //新手指南
  const introduce = () => {
    setShowModal(true);
  };
  const closeModal = () => {
    setShowModal(false); // 关闭弹窗
  };
  return (
    <div>
      {typeof window.ethereum != "undefined" ? (
        <div
          className="flex flex-col justify-center items-center h-screen"
          style={{
            backgroundImage: `url(${images[currentImageIndex]})`,
            backgroundColor: "rgb(10, 10, 10)",
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat",
            width: "100%",
            height: "100vh",
            transition: "background-image 1s ease-in-out",
          }}
        >
          <div className="logoDiv">
            <div className=" nameDiv">
              <span className="ml-3 font-mono font-bold text-3xl text-white logoSpan">
                SongWarm颂暖
              </span>
            </div>
            <img src="images/logo1.png" className="logoSrc" />
          </div>
          <div className="oneDiv">
            <div className="content_container">
              <span className="contentFont text-white text-6xl font-bold contentSpan">
                {textForImage}
              </span>
            </div>
            <div className="checkTwoDiv">
              <div
                onClick={LoginWallet}
                className="flex border-opacity-60 bg-opacity-90 text-lg font-medium border-2  cursor-pointer   text-white mt-1 rounded-2xl justify-center items-center py-1 px-2 mt-4 connectButtonDiv"
              >
                连接Metamask
                <img className="h-10" src="metamask.png" alt="metamask" />
              </div>
              <div
                onClick={introduce}
                className="flex border-opacity-60 bg-opacity-90 text-lg font-medium border-2  cursor-pointer   text-white mt-1 rounded-2xl justify-center items-center py-1 px-2 mt-4 personButtonDiv"
              >
                新手指南
              </div>
              {showModal && (
                <div className="modal-overlay">
                  <div className="modal">
                    <h1>新手指南</h1>
                    <p>
                      欢迎来到 SongWarm 颂暖平台
                      <br />
                      SongWarm
                      颂暖是一个基于区块链技术的慈善捐款平台，旨在为需要帮助的人提供资金支持。以下是您在开始使用我们的平台之前需要了解的一些基本信息和操作步骤：
                    </p>
                    <p>
                      1. 安装 MetaMask
                      <br />
                      在开始之前，请确保您已经安装了MetaMask扩展。MetaMask
                      是一个浏览器扩展，允许您与以太坊区块链进行交互。如果您还没有安装，请访问
                      Chrome、Edge或直接点击页面上的链接进行安装。
                      <br />
                      <img
                        src="/images/introduce01.jpg"
                        className="introduceImg"
                      />
                      <br />
                      2. 连接 MetaMask
                      <br />
                      安装完成后，请连接您的MetaMask
                      钱包。在我们的平台上点击“连接MetaMask"
                      按钮，按照提示操作先勾选要连接的账户，随即点击“下一步”按钮，再点击“连接”按钮，确保您的钱包已成功连接。
                      <img
                        src="/images/introduce02.jpg"
                        className="introduceImg"
                      />
                      <br />
                      <br />
                      3. 选择慈善类别
                      <br />
                      进入平台之后，您可以选择不同的慈善类别进行投票（必须先进行捐款），包括教育资助、慈善救助、环境保护、社会福利和文化艺术等，也可直接在首页面进行捐款。
                      <br />
                      4. 捐款流程
                      <br />
                      选择您想要支持的筹款项目后，您可以通过输入捐款金额（以WEI
                      为单位，捐款金额不得小于100wei）来进行捐款。捐款成功后，您将获得投票权，可以对需要帮助的人进行投票。
                      <br />
                      5. 投票机制
                      <br />
                      投票是平台的核心功能之一。当投票人数超过捐款人数的一半时，平台将会给需要帮助的人发放资金。
                      <br />
                      6. 创建筹款项目
                      <br />
                      管理员和用户都可以创建筹款项目。用户创建的筹款项目收款方是我们基金会，
                      这些资金将用于捐助有需要的人。创建项目时，请详细填写项目信息，包括项目描述、目标金额和筹款图片等。
                      <br />
                      7. 查看合约余额
                      <br />
                      我们的合约余额都是公开透明的，您可以在平台上实时查看。
                      <br />
                      8. 投票捐款详情记录
                      <br />
                      所有筹款项目的相关记录都是公开透明的。管理员创建的每个项目都有记录投票者；用户创建的每个项目也都有记录谁捐款者以及捐款总金额。
                      <br />
                      9. 查看个人信息
                      <br />
                      登录成功的用户可以查看和管理自己的个人信息及捐款记录，包括捐款历史和投票记录等。
                      <br />
                    </p>
                    <button className="close-button" onClick={closeModal}>
                      &times;
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      ) : (
        <div className="flex flex-col justify-center items-center mt-10">
          <a
            target={"_blank"}
            href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn"
          >
            <div className="flex border-opacity-60 bg-opacity-90 text-lg font-medium border-2 border-black cursor-pointer bg-black text-white mt-4 rounded-lg justify-center items-center py-1 px-2">
              请先安装metamask
              <img className="h-10" src="metamask.png" />
            </div>
          </a>
        </div>
      )}
    </div>
  );
}

export default CheckConnect;
